<template>
  <transition name="el-zoom-in-top">
    <div v-if="visible" class="flex direction-column table-modal">
      <div class="padding flex justify-between table-modal-title">
        <span class="title-text">监管企业情况TOP5</span>
        <span class="close-button flex-center" :style="{color: themeColor}" @click="clickClose">
          <i class="i-custom:arrow-left"></i>
        </span>
      </div>
      <div class="padding table-modal-head">
        <el-radio-group v-model="checked" @change="getTop10">
          <el-radio v-for="option in options" :key="option.value" :label="option.value">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <el-table
        v-loading="loading" :data="lists" height="100%" class="padding table"
        :header-cell-style="{backgroundColor: themeColor, color: 'white', textAlign: 'center'}"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      </el-table>
    </div>
  </transition>
</template>

<script>
import DialogMixin from '@/mixins/dialog-mixin'
import { selectYearConsumeTopThree, selectYearComprehensiveEnergyConsumptionTopFive } from '@/api/energyDataManagement'
import {
  COAL,
  COAL_TEXT,
  COMPREHENSIVE_CONSUMPTION,
  COMPREHENSIVE_CONSUMPTION_TEXT,
  ELECTRIC,
  ELECTRIC_TEXT,
  GAS,
  GAS_TEXT,
} from '@/config'
import { loadUnderEnterprise } from '@/api/enterprose'

export default {
  name: 'table-modal',
  mixins: [DialogMixin],
  data () {
    return {
      checked: '',
      options: [
        { label: COMPREHENSIVE_CONSUMPTION_TEXT, value: COMPREHENSIVE_CONSUMPTION },
        { label: ELECTRIC_TEXT, value: ELECTRIC },
        { label: GAS_TEXT, value: GAS },
        { label: COAL_TEXT, value: COAL },
      ],
      loading: false,
      lists: [],
      columns: [
        { label: '企业名称', prop: 'enterpriseName', width: 260 },
        { label: '所属区域', prop: 'districtBelongName', align: 'center' },
        { label: '所属行业', prop: 'industryBelongName', align: 'center' },
        { label: '经纬度', prop: 'lnglat', align: 'center' },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.getTop10()
  },
  methods: {
    clickClose () {
      this.close()
      this.checked = ''
      this.$nextTick(() => {
        this.getTop10()
      })
    },
    open () {
      this.getTop10()
      this.visible = true
    },
    transferData (data) {
      return (data || []).map(v => ({
        id: v.id,
        enterpriseName: v.name || v.enterpriseName,
        districtBelongName: v.districtBelongName || v.regionName || '-',
        industryBelongName: v.belongIndustryName || v.industryName || '-',
        lnglat: (v.longitude && v.latitude) ? [Number(v.longitude), Number(v.latitude)] : '-',
        longitude: v.longitude,
        latitude: v.latitude,
      }))
    },
    getTop10 () {
      this.loading = true
      const checked = this.checked
      let promise
      if (!checked) {
        promise = loadUnderEnterprise().then(res => {
          if (res.code === 200) {
            return this.transferData(res.data)
          }
        })
      } else if (checked === COMPREHENSIVE_CONSUMPTION) {
        promise = selectYearComprehensiveEnergyConsumptionTopFive().then(res => {
          if (res.code === 200) {
            return this.transferData(res.data)
          }
        })
      } else {
        promise = selectYearConsumeTopThree(checked).then(res => {
          if (res.code === 200) {
            return this.transferData(res.data)
          }
        })
      }
      promise.then(data => {
        this.lists = data
        this.$emit('change', data)
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .table-modal {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 600px;
    height: calc(100% - 20px);
    z-index: 110;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    box-shadow: 0 0 16px 2px rgba(0,0,0,0.1);
  }
  .close-button {
    border: 1px solid currentColor;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }
  .table {
    background: transparent;
  }
</style>
